<template>
	<div>
		<div v-for="commentItem in commentList" v-bind:key="commentItem.id">
			<div class="comment-item">

				<div class="comment-content">
					<div class="comment-attr">
						{{commentItem.author+" "+dateFormat(commentItem.dataTime)}}
						<i class="el-icon-delete" 
						style="position:absolute;top:5px;right:-30px;color:rgba(106,5,0,1);font-weight:600;" 
						@click="deleteClick(commentItem)"
						v-if="showDelete&&login==commentItem.author"
						></i>
					</div>
					
					<div class="comment-text" @click="textClick(commentItem)">
						<text style="color:#999;" v-if="parentText&&parentText.length>0">
							{{"回复"+parentText+"："}}
						</text>
						{{commentItem.content}}
					</div>
				</div>
			</div>
			<div class="sub-item">
				<commentitem :showDelete="showDelete" :commentList="commentItem.children" :parentText="commentItem.author"
				 v-on:commentClick="textClick" v-on:deleteClick="deleteClick"></commentitem>
			</div>
			<div class="split-line"></div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'commentitem',
		props: {
			commentList: Array,
			parentText: String,
			showDelete: Boolean
		},
		data() {
			return {
				login: ''
			};
		},
		methods: {
			dateFormat(longDate) {
				if (longDate != null && longDate.length > 11) {
					var date = longDate.substring(5, 10);
					var time = longDate.substring(11, 16);
					return (date + " " + time);
				}
			},
			textClick(commentItem) {
				this.$emit('commentClick', commentItem);
			},
			deleteClick(commentItem) {
				this.$emit('deleteClick', commentItem);
			}
		},
		mounted() {
			console.log("commentitem created")
			// this.login=uni.getStoragseSync("login");
			this.login=JSON.parse(localStorage.getItem("userInfo")).login;
		}
	}
</script>

<style>
	.comment-item {
		width: 750rpx;
		display: flex;
		flex-direction: row;
		background-color: #fff;
		justify-content: start;
		align-items: start;
	}

	.comment-icon {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 200%;
	}

	.comment-content {
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: start;
		align-content: start;
	}

	.comment-text {
		font-size: 90%;
		text-align: left;
		margin-left: 10px;
	}

	.comment-attr {
		font-size: 80%;
		color: #999;
		text-align: right;
		margin-right: 10px;
		position: relative;
	}

	.sub-item .comment-item {
		margin-left: 20px;
		width: calc(100% - 40px);
		background-color: rgba(220, 220, 220, 0.3);
		padding: 10px 0;
		border-radius: 5px;
		margin-top: 2px;
	}

	.sub-item .split-line {
		display: none;
	}

	.split-line {
		margin: 15px auto;
		border-top: 1px solid rgba(180, 180, 180, 0.3);
		width: 90%;
	}
</style>
